import ChartBase from "./chart-base";
import { deepClone, mergeObject } from "@/utils";

export default class Funnel extends ChartBase {
  constructor() {
    super();
  }

  // 基础描述
  _info = {
    name: "漏斗图",
    type: "funnel", // 图表类型
    group: "funnel", // 图表分类
    component: "e-chart",
    icon: "funnel", // 图表展示ICON
  };

  // 总 配置项
  _defaultOption = {
    tooltip: {
      show: true,
    },
    legend: {
      show: false,
      //图例
      type: "scroll", //可滚动的图例
      right: "5%", //图例组件离容器左侧的距离：靠左
      orient: "vertical", //图例列表的布局朝向：垂直
      top: "center", //图例组件离容器左侧的距离：居中
    },
    series: [],
  };

  // 系列
  _defaultSeries = {
    type: "funnel",
    left: "5%",
    right: "35%",
    top: "10%",
    bottom: "10%",
    minSize: "0%",
    maxSize: "100%",
    sort: "ascending",
    orient: "vertical",
    label: {
      show: true,
      position: "right",
      formatter: function (params) {
        return params.name;
      },

      rich: {
        a: {
          color: "rgba(222,240,255,1)",
          fontSize: 30,
        },
        b: {
          color: "rgba(101,166,196,1)",
          fontSize: 14,
        },
      },
    },
    labelLine: {
      length: 100,
      lineStyle: {
        width: 1,
        type: "solid",
      },
    },
    data: [],
  };

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: "类目",
      key: "name",
      type: ["string", "date", "number"],
      limit: 1,
    },
    {
      label: "数值",
      key: "value",
      type: ["number"],
      limit: -1,
    },
  ];

  //样式配置描述信息
  _styleOptionConfig = [
    {
      label: "图表配置",
      bindKeys: "_group.echart",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "朝向",
      bindKeys: "config.series.orient",
      controlType: "select",
      controlValue: "vertical",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "横向",
            value: "horizontal",
          },
          {
            label: "纵向",
            value: "vertical",
          },
        ],
      },
    },
    {
      label: "是否倒序",
      bindKeys: "config.sort.isAsce",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "图例配置",
      bindKeys: "_group.legend",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "显示",
      bindKeys: "option.legend.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "数值",
      bindKeys: "config.value.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "百分比",
      bindKeys: "config.percent.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标签配置",
      bindKeys: "_group.label",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "显示",
      bindKeys: "config.series.label.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "位置",
      bindKeys: "config.series.label.position",
      controlType: "select",
      controlValue: "right",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "内部",
            value: "inside",
          },
          {
            label: "内部右侧",
            value: "insideRight",
          },
          {
            label: "内部左侧",
            value: "insideLeft",
          },
          {
            label: "左侧",
            value: "left",
          },
          {
            label: "右侧",
            value: "right",
          },
          {
            label: "上侧",
            value: "top",
          },
          {
            label: "下侧",
            value: "bottom",
          },
          {
            label: "左侧上部",
            value: "leftTop",
          },
          {
            label: "左侧下部",
            value: "leftBottom",
          },
          {
            label: "右侧上部",
            value: "rightTop",
          },
          {
            label: "右侧下部",
            value: "rightBottom",
          },
        ],
      },
    },
  ];

  getOption({
    dataList = [],
    dataTotal = 0,
    dataPoolField,
    styleOptionConfig = [],
    themeColor = [],
    themeStyle = {},
  }) {
    let { option, series, config } =
      this._transformStyleOptionConfig(styleOptionConfig);
    let defaultOption = deepClone(this._defaultOption);
    let defaultSeries = deepClone(this._defaultSeries);

    if (defaultOption && option)
      defaultOption = mergeObject(defaultOption, option);
    if (defaultSeries && series)
      defaultSeries = mergeObject(defaultSeries, series);

    //数据处理
    if (dataPoolField.name.length && dataPoolField.value.length) {
      let name = dataPoolField.name[0].fieldName;
      let value = dataPoolField.value[0].fieldName;
      defaultSeries.data = dataList.reduce((r, c) => {
        r.push({
          name: c[name],
          value: c[value],
        });
        return r;
      }, []);
    }

    defaultSeries.label.show = config.series.label.show;
    defaultSeries.orient = config.series.orient;
    defaultSeries.label.position = config.series.label.position;

    defaultOption.color = themeColor;

    defaultOption.series.push({
      ...defaultSeries,
    });

    defaultOption.series[0].sort = config.sort.isAsce
      ? "ascending"
      : "descending";

    let total = defaultSeries.data.reduce((r, c) => {
      r += c.value;
      return r;
    }, 0);

    defaultOption.legend.formatter = (name) => {
      let item = defaultSeries.data.find((f) => f.name === name);

      if (config.percent.show && config.value.show) {
        return (
          name +
          "   |   " +
          Math.round((item?.value === 0 ? 0 : item?.value / total) * 10000) / 100 +
          "%" +
          "    " +
          item.value
        );
      } else if (config.percent.show) {
        return (
          name +
          "   |   " +
          Math.round((item?.value === 0 ? 0 : item?.value / total) * 10000) / 100 +
          "%"
        );
      } else if (config.value.show) {
        return name + "   |   " + item.value;
      } else {
        return name;
      }
    };

    return defaultOption;
  }

  getClickData(event) {
    const { name, seriesName, value } = event;

    return {
      label: name,
      value: value[seriesName],
    };
  }
}
